*{
  padding: 0;
  margin: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #031321;
  min-height: 100vh;
}
a{
  font-size: 24px;
  text-decoration: none;
  padding: 15px 30px;
  letter-spacing: 4px;
  position: relative;
  overflow: hidden;
}
a:hover{
  color:#2196f3;
  box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3;
  transition-delay: 1s;
}
a span{
  display: block;
  position: absolute;
}
a span:nth-of-type(1){
  width: 100%;/*这里不知道按钮元素的宽度，直接去100%*/
  height: 2px;/*这里一定要大于偏离a标签的位置，top*/
  top:0;
  left: -100%;
  background: linear-gradient(to right,transparent,#2196f3);
}
a:hover span:nth-of-type(1){
  transform: translate(200%,0);
  transition: 0.25s ease-in-out;
}
a span:nth-of-type(2){
  width: 2px;
  height: 100%;
  top:-100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#2196f3);
}
a:hover span:nth-of-type(2){
  transform: translate(0,200%);
  transition: 0.25s ease-in-out 0.25s;
}
a span:nth-of-type(3){
  width: 100%;
  height: 2px;
  bottom:0;
  right: -100%;
  background: linear-gradient(to left,transparent,#2196f3);
}
a:hover span:nth-of-type(3){
  transform: translate(-200%,0);
  transition: 0.25s ease-in-out 0.5s;
}
a span:nth-of-type(4){
  width: 2px;
  height: 100%;
  bottom:-100%;
  left: 0;
  background: linear-gradient(to top,transparent,#2196f3);
}
a:hover span:nth-of-type(4){
  transform: translate(0,-200%);
  transition: 0.25s ease-in-out 0.75s;
}